<template>
  <div id="applyVSReport">
    <Breadcrumb content="申请记录" />
    <div class="bodyContent">
      <vxe-toolbar perfect>
        <template #buttons>
          <el-form :model="searchForm" class="form-input-m" label-width="80px" :inline="true">
            <el-form-item label="条码号">
              <vxe-input  type="text" v-model="searchForm.reqNo" clearable ></vxe-input>
            </el-form-item>
            <el-form-item label="患者姓名">
              <vxe-input  type="text" v-model="searchForm.patNa" clearable ></vxe-input>
            </el-form-item>
            <el-form-item label="证件号码">
              <vxe-input  type="text" v-model="searchForm.idNo" clearable ></vxe-input>
            </el-form-item>
            <el-form-item label="病历号">
              <vxe-input  type="text" v-model="searchForm.patNo" clearable ></vxe-input>
            </el-form-item>
            <el-form-item label="联系电话">
              <vxe-input  type="text" v-model="searchForm.telNo" clearable ></vxe-input>
            </el-form-item>
            <el-form-item label="检测项目">
            <vxe-input  type="text" v-model="searchForm.reqPurpose" clearable ></vxe-input>
            </el-form-item>
            <el-form-item label="申请日期">
              <el-date-picker v-model="searchForm.reqTime" value-format="YYYY-MM-DD" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>


            <el-form-item>
              <vxe-button type="text" class="button-blue" icon="vxe-icon-refresh" content="查询" @click="getLyReagent"></vxe-button>
              <vxe-button type="text" class="button-blue" icon="vxe-icon-print" content="打印交接单" @click="printEvent"></vxe-button>
              <vxe-button type="text" class="button-blue" icon="vxe-icon-download" content="导出申请" @click="exportExcel('#printTest', '申请记录')"></vxe-button>&nbsp;&nbsp;
            </el-form-item>

          </el-form>
        </template>
      </vxe-toolbar>
      <Splitpanes class="area">
        <Pane :size="80">
          <div class="tableBox">
            <vxe-table ref="reqQueryTable" border class="mytable-scrollbar" height="auto" show-overflow keep-source align="left" :row-config="{ isCurrent: true, isHover: true }" @current-change="instrRowClick" :data="labReqList"  v-loading="reqMainLoading" :column-config="{ resizable: true }">
              <vxe-column type="seq" title="#" width="30"></vxe-column>
              <vxe-column field="reqNo" title="条码号" width="150"></vxe-column>
              <vxe-column field="patNa" title="患者姓名"></vxe-column>
              <vxe-column field="idNo" title="证件号码" ></vxe-column>
              <vxe-column field="telNo" title="联系电话"></vxe-column>
              <vxe-column field="patNo" title="病历号"></vxe-column>
              <vxe-column field="reqPurpose" title="检测目的" width="400"></vxe-column>
              <vxe-column field="reqDoctorNa" title="申请医生" ></vxe-column>
              <vxe-column field="reqTime" title="申请时间" >
                <template #default="{ row }">
                  <span>{{ formatDateTime( row.reqTime,'yyyy-MM-dd') }}</span>
                </template>
              </vxe-column>
              <vxe-column field="signerNa" title="接收人"></vxe-column>
              <vxe-column field="signTime" title="接受时间"></vxe-column>
              <vxe-column field="stateNa" title="状态"></vxe-column>
              <vxe-column field="creatorNa" title="创建人"></vxe-column>
            </vxe-table>
          </div>
        </Pane>
        <Pane :size="20">
          <div class="tableBox">
            <vxe-table ref="reqDetailTableRef" :data="reqDetailList" :loading="reqDetailLoading" class="mytable-scrollbar supplierTableClazz" border="inner" align="center" height="auto" :row-config="{ isCurrent: true, isHover: true }" :column-config="{ resizable: true }" resizable show-overflow keep-source>
              <vxe-column type="seq" width="24" fixed="left"></vxe-column>
              <vxe-column field="feeCode" title="项目代号" ></vxe-column>
              <vxe-column field="feeName" title="项目名称" min-width="120"></vxe-column>
              <vxe-column field="price" title="单价" ></vxe-column>
              <vxe-column field="amount" title="数量" ></vxe-column>
              <vxe-column field="costs" title="金额"  align="right"></vxe-column>

            </vxe-table>
          </div>
        </Pane>
      </Splitpanes>

    </div>
  </div>
</template>

<script lang="ts" setup>
// 引入组件区 ==========
import Breadcrumb from '@/components/Breadcrumb.vue';
import { Splitpanes, Pane } from 'splitpanes';
import { ref, reactive, getCurrentInstance, onMounted, watch } from 'vue';
import { AppStore } from '@/stores/store';
import { isEmpty } from 'lodash';
import {IsEmpty,formatDateTime} from "@/utils/common";
import {VxeMessage, VxeNotifyType} from "@/utils/CommonMessage";
import Template from "@/views/lab_sys/lab_bus/components/Template.vue";


let store = AppStore();
// 全局变量定义区 ==========
// 变量定义区
let { proxy }: any = getCurrentInstance();
let sltInCompany: any = reactive({});

let reqMainLoading = ref(false);
let reqDetailLoading = ref(false);
const searchForm = reactive({
  reqNo:'' ,
  patNa:'',
  idNo:'',
  patNo: '',
  telNo: '',
  reqPurpose: '',
  reqDept: '',
  reqTime: [],
  orgId: store.userInfo.orgId,
  name: store.userInfo.orgName
});
const labReqList = reactive([]);
const reqDetailList = reactive([]);


// 方法定义区 =============
onMounted(async() => {
  const res: any = await findCompanyUserList();
  if (res.status.code === 1) {
    sltInCompany = res.data[0];
  }
  getLyReagent();
});
async function findCompanyUserList() {
  return new Promise((resolve, reject) => {
    const url = '/lab/inspectCompanyUser/findInspectCompanyUserList';
    proxy.$http
        //注意此处的数据条数
        .get(url, {
          params: {
            username: store.userInfo.username
          }
        })
        .then((res: any) => {
          resolve(res);
        })
        .catch((err: any) => {
          // VxeMessage('获取获取当前字典的规则列表失败',VxeNotifyType.error)
        });
  });
}

function instrRowClick({ row }: any) {
  (proxy.$refs.reqQueryTable as any).setCurrentRow(row);
  findReqDetailList(row.reqNo);
}

function findReqDetailList(reqNo: any) {
  reqDetailList.length = 0;
  reqDetailLoading.value = true;
  const url = '/api/reqdetail/getDetailByBarcode';
  proxy.$http
      .get(url, { params: { reqNo: reqNo } })
      .then((res: any) => {
        reqDetailList.length = 0;
        reqDetailList.push(...res.data);
        reqDetailLoading.value = false;
      })
      .catch((err: any) => {
        reqDetailLoading.value = false;
        proxy.$alert(err, '提示');
      });
}

// 获取中间的报告单元信息
function getLyReagent() {
  if (IsEmpty(sltInCompany)) {
    VxeMessage('当前用户为对照送检单位', VxeNotifyType.error);
    return;
  }
  labReqList.length = 0;
  reqDetailList.length = 0;
  reqMainLoading.value = true;
  const url = '/lab/reqMain/findMainList';
  let obj = {
    params: {
      reqNo: searchForm.reqNo,
      patNa:searchForm.patNa,
      idNo:searchForm.idNo,
      patNo:searchForm.patNo,
      telNo:searchForm.telNo,
      reqPurpose:searchForm.reqPurpose,
      reqDept:searchForm.reqDept,
      startTime: (!isEmpty(searchForm.reqTime)&&!isEmpty(searchForm.reqTime[0]))?searchForm.reqTime[0]+' 00:00:00':'',
      endTime:   (!isEmpty(searchForm.reqTime)&&!isEmpty(searchForm.reqTime[1]))?searchForm.reqTime[1]+' 23:59:59':'',
      companyCode: sltInCompany.companyCode,
      orgId: searchForm.orgId
    }
  };
  proxy.$http
      .get(url, obj)
      .then((res: any) => {
        if (res.data && res.data.length > 0) {
          labReqList.push(...res.data);
          instrRowClick({ row: labReqList[0] });
        }
        reqMainLoading.value = false;
      })
      .catch((err: any) => {
        proxy.$alert(err, '提示');
        reqMainLoading.value = false;
      });
}
//打印
function printEvent(){
  const $table = proxy.$refs.reqQueryTable as any;
  $table.print();
}
//导出excel
function exportExcel(dom, title) {
    const $table = proxy.$refs.reqQueryTable as any;
    $table.exportData({ data: labReqList, type: 'csv', filename: title, useStyle: true });
}

</script>
<style lang="scss" scoped>
#applyVSReport {
  height: 100%;

  .bodyContent {
    height: calc(100% - 160px);

    .tableBox {
      height: calc(100%);
      background-color: $base-white;
    }
    // 附加按钮间距
    .button-blue,
    .button-red {
      margin: 5px 0 5px 5px;
    }

    // 查询按钮
    .SearchBtn {
      margin-right: 5px;
    }

  }
  .dialogFooter {
    text-align: right;
  }
}
</style>
